<template>
  <div style="padding: 0px;">
    <div style="margin-bottom: 6px;">
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-edit" @click="saveData">保存</el-button>
      <el-button size="mini" class="filter-item" style="margin-left: 3px;" icon="el-icon-circle-close" @click="close">关闭</el-button>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="测试数据" name="default_data">
        <el-table ref="default_data" border size="mini" :data="stepData['default_data']" style="width: 100%">
          <el-table-column prop="key" align="center" label="名称" min-width="160">
            <template slot-scope="{ row, $index }">
              <template v-if="!row.custom">
                <el-select v-model="row.key" size="mini" class="filter-item" style="width: 100%;" @change="keyChange(row.key, $index, 'default_data')">
                  <el-option v-for="item in stepDataParams['default_data']" :key="item" :label="item" :value="item" />
                </el-select>
              </template>
              <template v-else>
                <el-input v-model="row.key" size="mini" placeholder="请输入key" />
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="value" align="center" label="值" min-width="160">
            <template slot-scope="{ row }">
              <el-input v-model="row.value" size="mini" placeholder="请输入value" />
            </template>
          </el-table-column>

          <el-table-column label="操作" header-align="center" align="center" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="addHandle(scope.row, scope.$index, 'default_data')">新增</el-button>
              <el-button type="text" size="mini" @click="deleteHandle(scope.row, scope.$index, 'default_data')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="输出数据" name="export_data">
        <el-table ref="export_data" border size="mini" :data="stepData['export_data']" style="width: 100%">
          <el-table-column prop="key" align="center" label="名称" min-width="160">
            <template slot-scope="{ row, $index }">
              <template v-if="!row.custom">
                <el-select v-model="row.key" size="mini" class="filter-item" style="width: 100%;" @change="keyChange(row.key, $index, 'export_data')">
                  <el-option v-for="item in stepDataParams['export_data']" :key="item" :label="item" :value="item" />
                </el-select>
              </template>
              <template v-else>
                <el-input v-model="row.key" size="mini" placeholder="请输入key" />
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="value" align="center" label="值" min-width="160">
            <template slot-scope="{ row }">
              <el-input v-model="row.value" size="mini" placeholder="请输入value" />
            </template>
          </el-table-column>

          <el-table-column label="操作" header-align="center" align="center" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="addHandle(scope.row, scope.$index, 'export_data')">新增</el-button>
              <el-button type="text" size="mini" @click="deleteHandle(scope.row, scope.$index, 'export_data')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="预期结果" name="expected_result">
        <el-table ref="expected_result" border size="mini" :data="stepData['expected_result']" style="width: 100%">
          <el-table-column prop="key" align="center" label="名称" min-width="160">
            <template slot-scope="{ row, $index }">
              <template v-if="!row.custom">
                <el-select v-model="row.key" size="mini" class="filter-item" style="width: 100%;" @change="keyChange(row.key, $index, 'expected_result')">
                  <el-option v-for="item in stepDataParams['expected_result']" :key="item" :label="item" :value="item" />
                </el-select>
              </template>
              <template v-else>
                <el-input v-model="row.key" size="mini" placeholder="请输入key" />
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="value" align="center" label="值" min-width="160">
            <template slot-scope="{ row }">
              <el-input v-model="row.value" size="mini" placeholder="请输入value" />
            </template>
          </el-table-column>

          <el-table-column label="操作" header-align="center" align="center" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="addHandle(scope.row, scope.$index, 'expected_result')">新增</el-button>
              <el-button type="text" size="mini" @click="deleteHandle(scope.row, scope.$index, 'expected_result')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'StepData',
  props: {
    stepData: {
      type: Object,
      default() {
        return {
          default_data: [
            {
              key: '',
              value: ''
            }
          ],
          export_data: [
            {
              key: '',
              value: ''
            }
          ],
          expected_result: [
            {
              key: '',
              value: ''
            }
          ]
        }
      }
    },
    stepDataParams: {
      type: Object,
      default() {
        return {
          default_data: ['自定义数据'],
          export_data: ['自定义数据'],
          expected_result: ['自定义数据']
        }
      }
    },
    dataType: {
      type: String,
      default: 'default_data'
    }
  },
  data() {
    return {
      activeName: this.dataType
    }
  },
  watch: {
    dataType() {
      this.activeName = this.dataType
    }
  },
  methods: {
    handleClick(tab, event) {},
    addHandle(row, index, dataType) {
      this.stepData[dataType].splice(index + 1, 0, {
        key: '',
        value: '',
        custom: false
      })
    },
    deleteHandle(row, index, dataType) {
      // 必须要要留一个空行
      this.stepData[dataType].splice(index, 1)
      if (this.stepData[dataType].length === 0) {
        this.stepData[dataType].splice(0, 0, {
          key: '',
          value: '',
          custom: false
        })
      }
    },
    close() {
      this.$emit('closeDataSetting')
    },
    saveData() {
      const saveData = {}
      // 去除空行和不需要的属性
      for (const k in this.stepData) {
        saveData[k] = {}
        this.stepData[k].forEach(item => {
          if (item.key !== undefined && item.key !== '') {
            saveData[k][item.key] = item.value
          }
        })
      }

      this.$emit('closeDataSetting', saveData)
    },
    keyChange(value, index, dataType) {
      if (value === '[自定义数据]') {
        this.stepData[dataType][index]['custom'] = true
        this.stepData[dataType][index]['key'] = ''
      }
    }
  }
}
</script>

<style>
.el-dialog__header {
  padding: 10px 10px 5px;
}
.el-dialog--center .el-dialog__body {
  padding: 15px 15px 16px;
}
</style>
